<template>
<div style="margin-top:30px">
  <div style="text-align: center;margin:20px">
    <img src="../assets/tasily_logo.png" width="200px">
  </div>
  <Row type="flex" justify="center" align="middle" class="code-row-bg">
    <Col span="6" class="demo-tabs-style1" style="background: #e3e8ee;padding:16px;">
        <Tabs type="card">
            <TabPane label="登陆">
              <Form ref="formInline" :model="formInline" :rules="ruleInline">
                <FormItem prop="user">
                  <Input type="text" v-model="formInline.user" placeholder="请输入账号">
                    <Icon type="ios-person-outline" slot="prepend"></Icon>
                  </Input>
                </FormItem>
                <FormItem prop="password">
                  <Input type="password" v-model="formInline.password" placeholder="请输入密码">
                    <Icon type="ios-lock-outline" slot="prepend"></Icon>
                  </Input>
                </FormItem>
                <FormItem>
                  <Button type="primary" @click="handleSubmit('formInline')" long>登陆</Button>
                  <Button style="color:#DBDBDB" type="text" ghost>忘记密码？</Button>
                </FormItem>
              </Form>
            </TabPane>
            <TabPane label="下载">标签二的内容</TabPane>
        </Tabs>
    </Col>
  </Row>
</div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'login',
  data () {
    return {
      // 登陆信息
      formInline: {
        user: '',
        password: ''
      },
      // 登陆信息验证
      ruleInline: {
        user: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码.', trigger: 'blur' },
          { type: 'string', min: 5, message: '密码长度不能小于5位', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    ...mapActions([
      'handleLogin',
      'getMenuList',
      'getUserDepartments',
      'getByDepartmentUUID'
    ]),
    // 登陆输入框验证
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.login(this.formInline.user, this.formInline.password)
        } else {
          this.$Message.error('请完善登陆信息!')
        }
      })
    },
    login (userName, password) {
      this.handleLogin({ userName, password }).then(result => {
        return this.getUserDepartments({userId: this.$store.state.user.userinfo.userId})
      })
        .then(data => {
          return this.getByDepartmentUUID({uuid: this.$store.state.user.departmentArray[0].uuid, start: 0, size: 10000})
        })
        .then(data => {
          this.$Message.success('恭喜您，登陆成功了')
          this.$router.push({
            name: 'home'
          })
        })
        .catch(error => {
          if (error === 'userNameOrPasswordFault') {
            this.$Message.error('输入的账号或者密码有误!')
          }
          console.debug('got error : ', error)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content {
      height: 120px;
      margin-top: -16px;
  }

  .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane {
      background: #fff;
      padding: 16px;
  }

  .demo-tabs-style1 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
      border-color: transparent;
  }

  .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
      border-color: #fff;
  }
</style>
